<template>
    <div class="study-record-list">
      <el-table :data="records" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="subject" label="科目" width="180"></el-table-column>
        <el-table-column prop="hours" label="学习时长" width="180"></el-table-column>
        <el-table-column prop="notes" label="备注"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="handleAdd">添加记录</el-button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        records: [
         
        ]
      };
    },
    methods: {
      handleEdit(row) {
        // 编辑记录的逻辑
        console.log('编辑记录:', row);
      },
      handleDelete(row) {
        // 删除记录的逻辑
        this.records = this.records.filter(record => record !== row);
      },
      handleAdd() {
        this.$router.push('/add');
      }
    }
  };
  </script>
  
  <style scoped>
  .study-record-list {
    padding: 20px;
    height: auto;
    width: 1300px;
    background-color: rgba(128, 199, 175, 0.115)  ;
    margin-left: 180px;
  }
  </style>
  